<template>
	<view>
		<cropper :imagePath="imageData.path" ref="cropper" :aspectRatio="0" :initialBoxWidthRatio="0.3" :minBoxWidthRatio="0.05" :minBoxHeightRatio="0.05" :initialBoxHeightRatio="0.3" @complete="complete" @cancel="cancel">
		</cropper>

		<view v-if="resultImg" class="preview-warp">
			<view class="preview-body">
				<image :src="resultImg" mode="aspectFit"></image>
			</view>
			<view class="preview-foot">
				<view class="view-btn" @click="resultImg=null">返回</view>
				<view class="view-btn bg" @click="saveImg">保存</view>
			</view>
		</view>

		<template v-else>
			<view class="btn_div" type="primary" @click="chooseImage">
				<image src="https://pic.rmb.bdstatic.com/bjh/d2be2d32038aad7350565c85f1d228f0.png" mode=""></image>
				<view>点击选择图片去水印</view>
			</view>
			<view class="content-tip">
				<p>1、图片去水印质量与您的图片息息相关，不同的图片去水印效果可能天差地别</p>
				<p>2、如果是复制的小红书或其他图集链接，请使用解析功能哟</p>
				<p>3、本功能只为相册中的图片去水印</p>
			</view>
		</template>
		<ad v-if="showAd" :unit-id="indexAd" ad-type="video" ad-theme="white"></ad>
		<!-- #ifdef MP-WEIXIN -->
		<privacy-popup></privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import cropper from '../../components/yankai-cropper/cropper.vue';
	export default {
		data() {
			return {
				imageData: null, //图片数据
				resultImg: '',
				uploadData:''
			}
		},
		components: {
			cropper
		},
		onLoad() {
			console.log(this.cropper)
		},
		methods: {
			complete(para) {
				uni.showLoading({
					title:'去水印中'
				})
				let that = this;
				console.log(para)
				let imgData = para.param;
				
				wx.login({
					success(res) {
						const code = res.code;
						uni.request({
							url: that.$qrCodeUrl + '/upload/cleanPic',
							data: {
								x: imgData.x,
								y: imgData.y,
								width: imgData.width,
								height: imgData.height,
								filePath: that.uploadData,
								source: that.$source,
								code: code
							},
							method: "POST",
							success: (res) => {
								//视频大小超过50M
								if (res.data.code === '0001') {
									that.resultImg = res.data.data
									// that.$refs.cropper.init(res.data.data);
								} else {
									uni.showModal({
										content: res.data.message
									})
								}
								uni.hideLoading();
							},
							fail() {
								uni.hideLoading();
								uni.showModal({
									content:res.data.message
								})
							},
							complete(res) {
								that.$refs.cropper.close(false);
							}
						});
					}
				})
			},
			cancel() {
				this.$refs.cropper.close(false);
			},
			saveImg(){
				var that = this;
				uni.showLoading({
					title:'保存中'
				})
				const downloadTask = uni.downloadFile({
					url: that.resultImg, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath
							})
							console.log("保存图片到相册")
						}
					},
					fail: function() {
						uni.showModal({
							content: '下载失败，联系作者反馈问题'
						})
					},
					complete:function() {
						uni.hideLoading();
					}
				});
			},
			chooseImage() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								that.imageData = image
								uni.showLoading({
									title:'图片检测中'
								})
								uni.uploadFile({
									url: that.$qrCodeUrl + "/upload/file", //仅为示例，非真实的接口地址
									filePath: that.imageData.path,
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										var uploadData = JSON.parse(res.data).data;
										that.uploadData = uploadData;
										uni.request({
											url: that.$qrCodeUrl + 'upload/checkImg',
											method: 'post',
											data: {
												uid: getApp().globalData.uid,
												source: that.$source,
												path: uploadData,
											},
											success(checkRes) {
												uni.hideLoading()
												let result = checkRes.data
												if (result.code == '0001') {
													//开始执行去水印操作
													that.$refs.cropper.init(that.imageData.path);
												} else {
													uni.showModal({
														content:checkRes.data.message
													})
												}
											},
											fail(checRes) {
												uni.hideLoading()
											}
										})
									},
									fail() {
										uni.showModal({
											content:'处理失败，请联系作者反馈问题'
										})
										uni.hideLoading()
									}
								});
								
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.btn_div {

		margin: 150px auto 0;
		text-align: center;

		image {
			width: 100px;
			height: 100px;
		}

		text {
			color: #515151;
		}
	}

	.preview-warp {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #000;
		z-index: 999;
		.preview-body {
			margin: 0 30rpx 0 30rpx;
			height: calc(100vh - var(--status-bar-height) - 88rpx - 100rpx - var(--safe-area-inset-bottom));
			position: relative;

			image {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}
		.preview-foot{
			position: absolute;
			width: 100%;
			bottom: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.view-btn{
				    width: 250rpx;
				    height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border: 1px solid #dfdfdf;
				color: #fff;
				border-radius: 30rpx;
				margin: 0 40rpx;
				font-size: 14px;
			}
			.bg{
				border: 1px solid #006eff;
				background-color: #006eff;
			}
		}
	}

	.content-tip {
		padding: 20px;
		color: #515151;
		font-size: 12px;
		line-height: 20px;
	}

	page {
		--safe-area-inset-top: 0px;
		--safe-area-inset-right: 0px;
		--safe-area-inset-bottom: 0px;
		--safe-area-inset-left: 0px;

	}

	@supports (top: constant(safe-area-inset-top)) {
		page {
			--safe-area-inset-top: constant(safe-area-inset-top);
			--safe-area-inset-right: constant(safe-area-inset-right);
			--safe-area-inset-bottom: constant(safe-area-inset-bottom);
			--safe-area-inset-left: constant(safe-area-inset-left);
		}

	}

	@supports (top: env(safe-area-inset-top)) {
		page {
			--safe-area-inset-top: env(safe-area-inset-top);
			--safe-area-inset-right: env(safe-area-inset-right);
			--safe-area-inset-bottom: env(safe-area-inset-bottom);
			--safe-area-inset-left: env(safe-area-inset-left);
		}
	}
</style>
